<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<view class="title">{{title}}</view>
			<view>司机端</view>
		</view>
		<uni-forms ref="form" :rules="rules" :modelValue="formData">
			<uni-forms-item class="acct" label="账户:" name="acct">
				<input type="text" v-model="formData.acct" placeholder="请输入账户" />
			</uni-forms-item>
			<uni-forms-item  class="pwd" label="密码:" name="pwd">
				<input type="password" v-model="formData.pwd" placeholder="请输入密码" />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" class="login-btn" @click="formSubmit">登录</button>
		<button type="primary" class="login-btn" @click="jump">登录</button>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue';
	const form = ref(null);
	const title = 'XX有限公司';
	const rules = {
				// 对name字段进行必填验证
				acct: {
					rules: [{
							required: true,
							errorMessage: '请输入账户',
						},
						// {
						// 	minLength: 3,
						// 	maxLength: 5,
						// 	errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
						// }
					]
				},
				// 对email字段进行必填验证
				pwd: {
					rules: [{
						required: true,
						errorMessage: '请输入密码',
					},
					{
						// minLength: 3,
						// maxLength: 5,
						// errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
					}]
				}
			}
	// let acct = ref('');
	// let pwd = ref('');
	
	const formData = reactive({
		acct: '',
		pwd: ''
	})
	const formSubmit = ()=> {
		form.value.validate().then(res=>{
			console.log('表单数据信息：', res);
		}).catch(err =>{
			console.log('表单错误信息：', err);
		})
	}
	const jump = ()=> {
		uni.navigateTo({
			url: '/pages/delivery/index'
		})
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 100rpx;
		width: 100rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		text-align: center;
		margin-bottom: 60rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
		margin-bottom: 10rpx;
	}
	form {
		display: block;
	}
	.acct, .pwd {
		width: 672rpx;
		height: 90rpx;
		margin-bottom: 20rpx;
		padding-left: 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		::v-deep .uni-forms-item__content {
		    position: relative;
		    font-size: 14px;
		    flex: 1;
		    box-sizing: border-box;
		    flex-direction: row;
		    height: 36px;
		    display: flex;
		    align-items: center;
		    border-bottom: 1px solid #e8e8e8;
		}
	}
	.login-btn {
		display: block;
		width: 672rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		margin-top: 20rpx;
	}
</style>
